<template>
	<view>
		<view class="header">
			<view @tap='a' :class="red">待付款</view>
			<view @tap='b' :class="white">已付款</view>
			<view class="white">已发货</view>
			<view class="white">已收回</view>
			<view class="white">申请退款</view>
		</view>
		<view v-if="wfk">
			<view class="fk" v-for="item in f">
			<view class="fk1">订单表号:77123151616</view>
			<view class="fk2">等待付款</view>
			<view class="fk3"></view>
			<view class="fk4">时间:{{item.addTime}}</view>
			<view class="fk5">￥{{item.subList[0].price}}</view>
			<view class="fk6">x{{item.totalCount}}</view>
			<view class="fk7">合计：{{item.totalPrice}}</view>
			</view>
		</view>
		<view v-show="yfk">
            <view class="fk" v-for="item in s">
			  <view class="fk1">订单表号:77123151616</view>
			  <view class="fk2">以付款</view>
			  <view class="fk3"></view>
			  <view class="fk4">时间:{{item.addTime}}</view>
			  <view class="fk5">￥{{item.subList[0].price}}</view>
			  <view class="fk6">x{{item.totalCount}}</view>
			  <view class="fk7">合计：{{item.totalPrice}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {list1} from '../../../util/user/user.js'
	export default {
		data() {
			return {
				f:[],
				s:[],
				user:[],
				list:'',
				wfk:true,
				yfk:false,
				red:'red1',
				white:'white1'
				
			}
		},
		methods: {
			a(){
				console.log(this.f)
				this.wfk=true;
				this.yfk=false;
				this.red='red1';
				this.white='white1';
			},
			b(){
				this.s=this.list.filter(item=>item.status=='1')
				console.log(this.s)
				this.wfk=false;
				this.yfk=true
				this.white='red1'
				this.red='white1'
			}
		},
		onLoad() {
			list1({
				userId:uni.getStorageSync('userInfo').id
			})
			.then(res=>{
				console.log(res)
				var list1=res.data.data.list
				console.log(list1)
				this.list = list1
				console.log(this.list)
				this.f=this.list.filter(item=>item.status=='0')
			})
			
			
			
		}
	}
</script>

<style>
	.header{
		display: flex;
		justify-content: start;
		background-color: #354E44;
	}
	.header view{
		width: 20%;
		text-align: center;
		
	}
	.fk{
		position: relative;
		width: 700rpx;
		height: 400rpx;
		background-color: white;
		margin: 30rpx auto;
		border-radius: 15rpx;
	}
    .fk1{
		position: absolute;
		left: 20rpx;
		top: 20rpx;
	}
	.fk2{
		position: absolute;
		left: 500rpx;
		top: 20rpx;
	}
	.fk3{
		position: absolute;
		left: 20rpx;
		top: 100rpx;
		width: 150rpx;
		height: 150rpx;
		background-color: grey;
	}
	.fk4{
		position: absolute;
		top: 300rpx;
		left: 20rpx;
	}
	.fk5{
		position: absolute;
		top: 100rpx ;
		left: 500rpx;
	}
	.fk6{
		position: absolute;
		left: 500rpx;
		top: 150rpx;
	}
	.fk7{
		position: absolute;
		top: 300rpx;
		left: 450rpx;
	}
	.red1{
	    color: red;	
	}
	.white{
		color: white;
	}
	.white1{
		color: white;
	}
</style>
